<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0"><text class="content-text">选项卡1的内容</text></view>
			<view v-if="current === 1"><text class="content-text">选项卡2的内容</text></view>
			<view v-if="current === 2"><text class="content-text">选项卡3的内容</text></view>
			<view v-if="current === 3"><text class="content-text">选项卡4的内容</text></view>
		</view>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
			items: ['日程表', '未开课', '已开课','已取消'],
			styles: [{
					value: 'button',
					text: '按钮',
					checked: true
				},
				{
					value: 'text',
					text: '文字'
				}
			],
			styleType: 'button',
	      /* tabList: [
	        { name: '日程表' },
	        { name: '未开课' },
	        { name: '已开课' },
			{ name: '已取消'},
	      ] */
	    };
	  },
	  methods:{
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex
			}
		},
	  }
	};
</script>

<style lang="scss">
	.uni-padding-wrap {
			// width: 750rpx;
			padding: 0px 30px;
		}
	
		.content {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;
			height: 150px;
			text-align: center;
		}
	
		.content-text {
			font-size: 14px;
			color: #666;
		}
</style>